﻿<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>药品采购明细管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- <p style="text-align: right;">
        <el-button type="warning" size="mini" @click="dialogVisable=true">采购明细</el-button>
        <el-button type="warning" size="mini" @click="dialogVisable1=true">添加采购明细</el-button>

      </p> -->
    <el-table
    :data="tableData"
    
    :header-cell-style="{background:'rgb(55,61,65)', color:'#fff','text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    style="width: 100%">
    <el-table-column
      prop="list_number"
      label="采购单据号"
      width="190">
    </el-table-column>
    <el-table-column
      prop="entry_date"
      label="入库时间"
      width="190">
    </el-table-column>
    <el-table-column
      prop="total_price"
      label="总金额"
      width="190">
    </el-table-column>
    <el-table-column
      prop="head"
      label="负责人"
      width="190">
    </el-table-column>
    
    <el-table-column
      prop="remarks"
      label="备注"
      width="190">
    </el-table-column>
    <el-table-column
      prop="mingxi"
      label="明细"
      width="280">
      <template >
        <!-- </template>slot-scope="scope"> -->
              <el-button @click="mingxi_click" style="color:red" type="text">采购明细</el-button>
              <el-button @click="mingxi_add" style="color:red"  type="text">添加采购明细</el-button>
      </template>

    </el-table-column>
    <el-table-column
      prop="status"
      label="操作"
    >
        <template slot-scope="scope">
            <el-button @click="delete(scope.row)" icon="el-icon-delete" style="color:red" type="text"></el-button>
        </template>
    </el-table-column>
    </el-table>
    <!-- 采购明细 -->
    <el-dialog
   title="采购明细"
   :visible.sync="dialogVisable"
   width="40%"
   >
  <el-table
    :data="tableData"
    border
    :header-cell-style="{background:'rgb(55,61,65)', color:'#fff','text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    style="width: 100%">
    <el-table-column
      prop="goods_name"
      label="药品名称"
      width="160">
    </el-table-column>
    <el-table-column
      prop="entry_number"
      label="数量"
      width="160">
    </el-table-column>
    <el-table-column
      prop="remarks"
      label="备注"
      width="160">
    </el-table-column>
    <el-table-column
      prop="status"
      label="操作"
      >
      <template slot-scope="scope">
            <el-button @click="delete(scope.row)" icon="el-icon-delete" style="color:red" type="text"></el-button>
        </template>
    </el-table-column>
    </el-table>
</el-dialog>

<!-- 添加采购明细 -->
<el-dialog
  title="添加采购明细"
  :visible.sync="dialogVisable1"
  width="40%"
  >
  <el-form label-position="top" :model="itemInfo">
    <el-form-item label="药品类别">
      <el-select style="width:100%;" v-model="itemInfo.category_name"  size="normal"  placeholder="请选择">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label1"
                :value="item.value2">
              </el-option>
            </el-select>
      <!-- <el-input v-model="itemInfo.category_name"></el-input> -->
    </el-form-item>
    <el-form-item label="药品名称">
      <el-select style="width:100%;" v-model="itemInfo.goods_name"  size="normal"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      <!-- <el-input v-model="itemInfo.goods_name"></el-input> -->
    </el-form-item>
    <el-form-item label="采购数量">
      <el-input v-model="itemInfo.entry_number"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea"  v-model="itemInfo.remarks"></el-input>
    </el-form-item>
    
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisable1 = false">关闭</el-button>
    <el-button type="primary" @click="dialogVisable1 = false">添加</el-button>
  </span>
</el-dialog>


    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      
      // 对话框
      dialogVisable:false,
      dialogVisable1:false,

      // 数据
      tableData:[{list_number:12,
                  total_price:12,
                  entry_date:new Date(),
                  head:'abc',
                  remarks:'aa',
                  mingxi:'aaa'}],
      //药品类别数据
       types: [{
          value1: '选项1',
          label1: '见效快'
        }, {
          value1: '选项2',
          label1: '当天服用'
        }],
        value1: '',
        value11:'',
      //药品名称数据
        options: [{
          value: '选项1',
          label: '黄花'
        }, {
          value: '选项2',
          label: '大黄花'
        }],
        value: '',
        value1:'',
      // 供应商数据
      itemInfo:{
        category_name:'',

      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    mingxi_click(e){
      this.dialogVisable=true
    },
    mingxi_add(e){
      this.dialogVisable1=true
    },
    //删除操作
    delete(e){

    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{}
</style>
